<template>
  <div id="app" class="layout">
    <Layout class="layout2">
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">
          <MenuItem name="1-1" @click.native="openMain">
            <Icon type="home"></Icon>
            <span>主页</span>
          </MenuItem>
          <MenuItem name="1-2" @click.native="openAndroid">
            <Icon type="social-android"></Icon>
            <span>安卓</span>
          </MenuItem>
          <MenuItem name="1-3" @click.native="openIos">
            <Icon type="social-apple"></Icon>
            <span>ISO</span>
          </MenuItem>
          <MenuItem name="1-4" @click.native="openEditor">
            <Icon type="social-apple"></Icon>
            <span>编辑器</span>
          </MenuItem>
        </Menu>
      </Sider>
      <Layout>
        <Header :style="{padding: 0}" class="layout-header-bar">
          <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '20px 20px 0'}" type="navicon-round"
                size="24"></Icon>
          <span class="layout-title" style="">{{title}}</span>
        </Header>
        <Content :style="{margin: '10px', background: '#fff', minHeight: '260px'}">
          <router-view/>
        </Content>
      </Layout>
    </Layout>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        isCollapsed: true,
        title: '主页'
      }
    },
    computed: {
      rotateIcon() {
        return [
          'menu-icon',
          this.isCollapsed ? 'rotate-icon' : ''
        ]
      },
      menuitemClasses() {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      collapsedSider() {
        this.$refs.side1.toggleCollapse()
      },
      openAndroid() {
        this.$router.push('/gankAndroid')
        this.title = '安卓'
      },
      openMain() {
        this.$router.push('/')
        this.title = '主页'
      },
      openIos() {
        this.$router.push('/ios')
        this.title = 'IOS'
      },
      openEditor() {
        this.$router.push('/editor')
        this.title = '编辑器'
      }
    }
  }

</script>

<style>
  .layout {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100vh;
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout > .layout2 {
    height: 100%;
  }

  .layout-header-bar {
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    text-align: left
  }

  .layout-header-bar > .layout-title {
    position: absolute;
    width: 300px;
    font-size: 22px;
  }

  .layout-logo-left {
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }

  .menu-icon {
    transition: all .3s;
  }

  .rotate-icon {
    transform: rotate(-90deg);
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 22px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

</style>
